<template>
    <view class="page-header">
        <view class="header-content" :style="headerStyle">
            <view class="back-icon" @click="goBack" v-if="showBack">
                <roc-icon-plus
                    type="fas"
                    name="angle-left"
                    :size="20"
                    color="#fff"
                ></roc-icon-plus>
            </view>
            <text class="title">{{ title }}</text>
            <view class="right-slot">
                <slot name="right"></slot>
            </view>
        </view>
        <!-- 占位元素，防止内容被fixed定位的header遮挡 -->
        <view class="header-placeholder" :style="placeholderStyle"></view>
    </view>
</template>

<script>
export default {
    name: "PageHeader",
    props: {
        title: {
            type: String,
            default: "页面标题",
        },
        // 是否显示返回按钮
        showBack: {
            type: Boolean,
            default: true,
        },
    },
    data() {
        return {
            statusBarHeight: 0, // 状态栏高度
            headerHeight: 120, // 头部内容高度（rpx）
        };
    },
    computed: {
        // 计算头部样式，包含状态栏高度
        headerStyle() {
            const totalHeight = this.statusBarHeight * 2 + this.headerHeight; // 转换为rpx
            return {
                height: `${totalHeight}rpx`,
                paddingTop: `${this.statusBarHeight * 2}rpx`, // 状态栏高度转换为rpx
            };
        },
        // 计算占位元素样式
        placeholderStyle() {
            const totalHeight = this.statusBarHeight * 2 + this.headerHeight; // 转换为rpx
            return {
                height: `${totalHeight}rpx`,
            };
        },
    },
    mounted() {
        this.getSystemInfo();
    },
    methods: {
        // 获取系统信息
        getSystemInfo() {
            try {
                const systemInfo = uni.getSystemInfoSync();
                const windowInfo = uni.getWindowInfo()
                // 获取状态栏高度，如果获取不到则使用默认值
                this.statusBarHeight = systemInfo.statusBarHeight || windowInfo.statusBarHeight || 20;
                console.log('获取状态栏高度')
                console.log(windowInfo)
                console.log(windowInfo.statusBarHeight)
                console.log('-----')
                console.log(systemInfo)
                console.log(systemInfo.statusBarHeight)
                // 在开发环境下打印调试信息
                // #ifdef APP-PLUS || H5
                console.log('系统信息:', {
                    statusBarHeight: systemInfo.statusBarHeight,
                    safeAreaInsets: systemInfo.safeAreaInsets,
                    windowTop: systemInfo.windowTop,
                });
                // #endif
            } catch (error) {
                console.error('获取系统信息失败:', error);
                // 设置默认状态栏高度
                this.statusBarHeight = 20;
            }
        },
        goBack() {
            if (this.showBack) {
                uni.navigateBack({
                    fail() {
                        // 如果没有上一页则跳转到首页
                        uni.switchTab({
                            url: "/pages/index/index",
                        });
                    },
                });
            }
        },
    },
};
</script>

<style lang="scss">
.page-header {
    width: 100%;

    .header-content {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        // height 和 paddingTop 通过计算属性动态设置
        display: flex;
        align-items: flex-end; // 改为底部对齐，确保内容在状态栏下方
        padding: 0 30rpx 20rpx 30rpx; // 底部增加一些内边距
        z-index: 100;
        box-sizing: border-box;

        background-image: url("@/static/images/header-bg.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;

        background-color: #2E6140;

        .back-icon {
            position: absolute;
            left: 30rpx;
            bottom: 20rpx; // 相对于底部定位
            width: 60rpx;
            height: 60rpx;
            display: flex;
            align-items: center;
        }

        .title {
            flex: 1;
            text-align: center;
            font-size: 36rpx;
            font-weight: 500;
            color: #fff;
            line-height: 60rpx; // 设置行高保持垂直居中
        }

        .right-slot {
            position: absolute;
            right: 30rpx;
            bottom: 20rpx; // 相对于底部定位
            display: flex;
            align-items: center;
        }
    }

    .header-placeholder {
        // height 通过计算属性动态设置
        width: 100%;
    }
}
</style>
